import Phaser from 'phaser'
import { Road } from '../classes/road'
import { Controller } from '../classes/mc/controller'
import { ScoreBox } from '../classes/comps/scoreBox'
import { AlignGrid } from '../classes/util/alignGrid'
import { FlatButton } from '../classes/ui/flatButton'
// import { Align } from './classes/util/align'

const _w = document.getElementById('app').getBoundingClientRect().width
export class SceneMain extends Phaser.Scene {
  constructor () {
    super('SceneMain')
  }

  preload () {
    this.load.spritesheet('cars', require('../../assets/img/car/cars.png'), { frameWidth: 60, frameHeight: 126 })
    this.load.image('road', require('../../assets/img/car/road.jpg'))
    this.load.image('line', require('../../assets/img/car/line.png'))
    this.load.image('pCar1', require('../../assets/img/car/pcar1.png'))
    this.load.image('pCar2', require('../../assets/img/car/pcar2.png'))
    this.load.image('cone', require('../../assets/img/car/cone.png'))
    this.load.image('barrier', require('../../assets/img/car/barrier.png'))

    this.load.image('button1', require('../../assets/img/ui/buttons/2/1.png'))
  }

  create () {
    // 添加道路
    this.road = new Road({ scene: this })
    this.road.x = _w / 2
    this.road.makeLines()

    // 添加分数
    window._that.$emitter = new Phaser.Events.EventEmitter()
    window._that.$controller = new Controller()
    window._that.$scoreBox = new ScoreBox({ scene: this })

    // 添加网格
    const gridConfig = { row: 5, cols: 5, scene: this }
    window._that.$alignGrid = new AlignGrid(gridConfig)
    window._that.$alignGrid.showNumbers()

    // 设置在网格所在对应的位置
    // this.barrier = this.add.sprite(0, 0, 'barrier')
    // window._that.$alignGrid.placeAtIndex(4, this.barrier)
    // Align.scaleToGameW(window._that.$scoreBox, 0.2)

    // 按钮
    const fireText = { color: 'red', fontSize: 20 }
    window._that.$flatButton = new FlatButton({ scene: this, key: 'button1', text: 'Press Me!', x: 200, y: 100, event: 'button_pressed', params: 'fire_lasers', textConfig: fireText })

    window._that.$emitter.on('button_pressed', this.buttonPressed, this)
  }

  buttonPressed (params) {
    console.log(params)
  }

  update (time, data) {
    this.road.moveLines()
    this.road.moveObject()
  }
}
